<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>注册</title>
    <link type="text/css" rel="stylesheet" href="css/zhuce.css"/>
    <script type="text/javascript" src="js/zhuce.js"></script>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var height = $(document).height();
            $('.main').css('height', height);

            $("#pwd2").change(function () {
                var pwd1 = $("#pwd1").val();
                var pwd2 = $("#pwd2").val();
                if (pwd1 != pwd2) {

                    $("#pwd2").focus();
                    alert("两次输入密码不一致")
                }

            });

            $("#tel").change(function () {

                checktel()

            });
            $("#username").change(function () {
                // alert("ss")
                checkusername()

            });

            $("#getval").click(function (){
                getvalidation();
            })
            $("#submition").click(function (){
                submition();
            })
        })

        //验证手机号是否重复
        function checktel() {
            var tel = $("#tel").val();
            // alert(tel)
            $.ajax({
                url: "user/findtel",
                type: "get",
                success: function (resp) {
                    $.each(resp, function (index, item) {
                        // alert(item.tel)
                        if (item.tel == tel) {
                            alert("手机号已存在")
                            $("#tel").focus()
                            $("#tel").val("")
                        }
                    })
                    // alert(resp)
                    // alert("findtel")
                }
            })
        }
        //验证用户名是否重复
        function checkusername() {
            console.log('sss')
            var username = $("#username").val();
            console.log('username', username)
            // alert(username)
            $.ajax({
                url: "user/findtel",
                type: "get",
                success: function (resp) {
                    // console.log('resp', resp)
                    $.each(resp, function (index, item) {
                        // console.log('item', item)
                        // alert(item.userName)
                        if (item.userName == username) {
                            alert("用户名已存在")
                            $("#username").focus()
                             $("#username").val("")
                        }

                    })
                    // alert(resp)
                    // alert("findtel")
                }
            })
        }

        //获取验证码
        function getvalidation(){
            var tel=$("#tel").val();
           if(tel==null || tel==""){
               alert("请输入手机号")
               return;
           }else{
               $.ajax({
                   url:"getvalidation",
                   type:"POST",
                   data:{tel:tel},
                   success:function (resp){
                       $("#right").val(resp);
                       // alert(resp)
                   }
               })
           }
        }

        function submition(){
            var val = $("#validation").val();
            var right=$("#right").val();
            if(val!=right){
                alert("验证码输入错误")
                val=""
                return;
            }else{
                var value=$("form").serialize();
                $.ajax({
                    url:"user/register",
                    type:"POST",
                    data:value,
                    success:function (resp){
                        // alert(resp)
                        location.href = "/jump2?url=login"
                    }
                })
            }
        }
        $(function (){
            $("#username").blur(function () {
                let name=$("#username").val();
                let reg="^[a-z0-9_]{3,10}$";
                // console.log(name);
                if (name.match(reg)){
                    $("#unameRs").html('√');
                }else{
                    $("#unameRs").html('×');
                }
            })

            $("#pwd1").blur(function () {
                let pass=$("#pwd1").val();
                let reg="^[a-z|0-9]{6}$";
                if (pass.match(reg)){
                    $("#uPassRs").html('√');
                }else {
                    $("#uPassRs").html('×');
                }
            })
        })
    </script>
    <script>
        $(document).ready(function () {
            $("#footer").load("jump2?url=common/footer0")
        })
    </script>
</head>

<body>
<div class="main">
    <div class="main0">
        <div class="main_left">
            <img src="images/zhuce-image-3.png" class="theimg"/>
            <img src="images/zhuce-image-2.png" class="secimg"/>
            <img src="images/zhuce-image-1.png" class="firimg"/>
        </div>
        <div class="main_right">
            <div class="main_r_up">
                <img src="images/user.png"/>
                <div class="pp">注册</div>
            </div>
            <div class="sub">
                <p>已经注册？<a href="login.html"><span class="blue">请登录</span></a></p>
            </div>

<!--            <form method="post" th:action="@{/user/register}">-->
            <form method="post" >
                <div class="txt txt0">
                    <span style="letter-spacing:8px;">用户名:</span>
                    <input id="username" name="userName" type="text" class="txtphone" placeholder="请输入用户名"
                           maxlength="50"/>
                    <span id="unameRs"></span>
                </div>
                <div class="txt txt0">
                    <span style="letter-spacing:4px;">登录密码:</span>
                    <input id="pwd1" name="password" type="password" class="txtphone" placeholder="请输入密码"
                           maxlength="50"/>
                    <span id="uPassRs"></span>
                </div>
                <div class="txt txt0">
                    <span style="letter-spacing:4px;">重复密码:</span>
                    <input id="pwd2" name="password1" type="password" class="txtphone" placeholder="请再次输入密码"/>
                </div>
                <div class="txt txt0">
                    <span style="letter-spacing:8px;">手机号:</span>
                    <input id="tel" name="tel" type="text" class="txtphone" placeholder="请输入手机号"
                           maxlength="11"/>
                </div>
                <div class="txt txt0">
                    <span style="float:left">验证码:</span>
                    <input id="right"  type="hidden"/>
                    <input id="validation" type="text" placeholder="请输入短信验证码" class="txtyzmdx"/>
                    <a href="javascript:;" class="tipTimer" id="getval" onClick="settime(this)">获取到短信验证码</a>
                </div>
                <div class="txt txt0">
                    <!-- <a href="zhuce2.html"><span style=" float:left;color:#31acfb"><返回上一步</span></a> -->
                    <!-- <a href="zhuceSucc.html"><div class="zhucebtn">确认注册</div></a> -->
                    <input id="submition" type="button" class="zhucebtn" value="确认注册"/>
                </div>

            </form>
        </div>
    </div>
</div>

<div id="footer"></div>
</body>
</html>
